<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>layui-demo</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css" />
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
	<div>
		<div>
			<!-- 内容主体区域 -->
			<div style="padding: 15px;">
				<div class="demoTable">
					<div class="layui-inline">
						<select class="layui-select" id="select">
							<option value="moviename">电影名</option>
							<option value="username">用户名</option>
							<option value="userid">电影用户编号</option>
						</select>
					</div>

					<div class="layui-inline">
						<input class="layui-input" name="id" id="demoReload"
							autocomplete="off">
					</div>
					
					<!-- layui时间区间组件 -->
					<div class="layui-inline">
	    			 	<label class="layui-form-label">日期范围</label>
	     			 	<div class="layui-input-inline">
	      			 		 <input type="text" class="layui-input" id="test6" autocomplete="off">
	     			 	</div>
	     			 	<input type = "text" id = "startTime" hidden = "">
	     			 	<input type = "text" id = "endTime" hidden = "">
     			 	</div>
					
					<button class="layui-btn" data-type="reload">搜索</button>
				</div>
				<table class="layui-hide" id="test" lay-filter="test"></table>
			</div>
		</div>

	</div>

	<script type="text/html" id="toolbarDemo">
		 <div class="layui-btn-container">
  			<button class="layui-btn layui-btn-sm" lay-event="getCheckData">批量禁用</button>
 		 </div>
	</script>

	<script type="text/html" id="barDemo">
		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="edit">禁用</a>
	</script>

	<script src="layui/layui.js" charset="utf-8"></script>
	<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

	<script>
		layui.use('table', function() {
			var table = layui.table;
			table.render({
				elem : '#test',
				url : 'gmrbl', //地址和springmvc中控制器地址一致
				toolbar : '#toolbarDemo',
				title : '追评表',
				cols : [ [ {
					type : 'checkbox',
					fixed : 'left'
				}, {
					field : 'reviewid',
					title : '追评编号',
					width : 120,
					fixed : 'left',
					unresize : true,
					sort : true
				}, {
					field : 'commentid',
					title : '评价编号',
					width : 120,
					unresize : true,
					sort : true,
					templet : '<div>{{d.comment.commentid}}</div>'

				}, {
					field : 'moviename',
					title : '电影名称',
					width : 188
				}, {
					field : 'username',
					title : '用户名',
					width : 150
				}, {
					field : 'reviewcontent',
					title : '追评内容',
					width : 380,
				}, {
					field : 'reviewtime',
					title : '追评时间',
					width : 250,
					sort : true,
					templet : "<div>{{layui.util.toDateString(d.reviewTime, 'yyyy-MM-dd HH:mm:ss')}}</div>"
				}, {
					field : 'reviewstatus',
					title : '状态',
					width : 150,
					sort : true,
					templet : function(res) {
						return res.reviewstatus == 0 ? "禁用": "启用";
					}
				},
				{
					fixed : 'right',
					title : '操作',
					toolbar : '#barDemo',
					width : 250
				} ] ],
				page : true,
				id : 'testReload'
			});

			//头工具栏事件
			table.on('toolbar(test)', function(obj) {
				var checkStatus = table.checkStatus(obj.config.id);
				switch (obj.event) {
				case 'getCheckData':
					var data = checkStatus.data;
					console.log(checkStatus.data);
					var idlist = "";
					for (var i = 0; i < data.length; i++) {
						idlist += data[i].reviewid
								+ ",";
					}
					console.log("idList:"+ idlist);
					layer.confirm('是否确定禁用',function(index) {
						//console.log(data); //得到的是当前行对应的数据信息
						$.ajax({
							type : "post", //提交方式
							url : "umrs",
							data : JSON.stringify(idlist),
							contentType : "application/json",
							success : function(cm) {
							layer.msg(cm.msg,{
								time : 2000
								},function() {
									if (cm.msg == "禁用成功！") {
										console.log(cm.msg);
										location.replace(location.href);
									}
								});
							}
						});
					});
					break;
				}
			});

			//监听行工具事件
			table.on('tool(test)', function(obj) {
				var data = obj.data;
				//console.log(obj)
				  if (obj.event === 'edit') {
					  layer.confirm('是否确定禁用',function(index) {
							//console.log(data); //得到的是当前行对应的数据信息
							console.log("reviewid :"+ data.reviewid);
							$.ajax({
								type : "post", //提交方式
								url : "umrs",
								data : JSON.stringify(data.reviewid),
								contentType : "application/json",
								success : function(cm) {
									layer.msg(cm.msg,{time : 2000},function() {
										if (cm.msg == "禁用成功!") {
											console.log("刷新:"+cm.msg);
											location.replace(location.href);
										}
									});
								}
							});
					});
				}
			});

			/*表格数据重载 模糊检索*/
			var $ = layui.$, active = {
				reload : function() {
					var demoReload = $('#demoReload');
					var select = $('#select');
					var startTime = $('#startTime');
					var endTime = $('#endTime');

					//执行重载
					table.reload('testReload', {
						page : {
							curr : 1
						//重新从第 1 页开始
						},
						where : { //检索的条件
							keywords : demoReload.val(),
							startTime : startTime.val(),
							endTime : endTime.val(),
							select : select.val()

						}
					});
				}
			};

			$('.demoTable .layui-btn').on('click', function() {
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});

		});
	</script>


	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

	<script>
		//JavaScript代码区域
		layui.use('element', function() {
			var element = layui.element;

		});
		var isShow = true; //定义一个标志位
		$('.kit-side-fold').click(function() {
			//选择出所有的span，并判断是不是hidden
			$('.layui-nav-item span').each(function() {
				if ($(this).is(':hidden')) {
					$(this).show();
				} else {
					$(this).hide();
				}
			});
			//判断isshow的状态
			if (isShow) {
				$('.layui-side.layui-bg-black').width(60); //设置宽度
				$('.kit-side-fold i').css('margin-right', '70%'); //修改图标的位置
				//将footer和body的宽度修改
				$('.layui-body').css('left', 60 + 'px');
				$('.layui-footer').css('left', 60 + 'px');
				//将二级导航栏隐藏
				$('dd span').each(function() {
					$(this).hide();
				});
				//修改标志位
				isShow = false;
			} else {
				$('.layui-side.layui-bg-black').width(200);
				$('.kit-side-fold i').css('margin-right', '10%');
				$('.layui-body').css('left', 200 + 'px');
				$('.layui-footer').css('left', 200 + 'px');
				$('dd span').each(function() {
					$(this).show();
				});
				isShow = true;
			}
		});
	</script>
	
	<script type="text/javascript">
		//layui时间组件
		layui.use('laydate', function(){
			  var laydate = layui.laydate;
			  //日期范围
			  laydate.render({
			    elem: '#test6'
			    ,range: true
			    ,done: function(value, date, endDate){
			        console.log(date); //得到日期生成的值，如：2017-08-18 });
			  		console.log(endDate);
			  		if(value!=null){
			  		var  startTime= date.year+"-"+date.month+"-"+date.date;
			  		console.log("startTime:"+startTime);
			  		$("#startTime").val(startTime);
			  		var  endTime= endDate.year+"-"+endDate.month+"-"+endDate.date;
			  		console.log("endTime:"+endTime);
			  		$("#endTime").val(endTime);
			  		}
			  }
			});
		});

	
	</script>

</body>
</html>
